<template>
	<view class="reset-password-container" :style="{ paddingTop: pdTop + 'rpx' }">
		<!-- 头部导航 -->
		<view class="header-nav">
			<view class="nav-back" @click="goBack('/views/login/forget-password')">
				<u-icon name="arrow-left" color="#333" size="20"></u-icon>
			</view>
		</view>
		
		<!-- 标题区域 -->
		<view class="title-section">
			<text class="title">忘记密码</text>
			<text class="subtitle">输入注册手机号码可重置密码</text>
		</view>
		
		<!-- 表单区域 -->
		<view class="form-container">
			<!-- 新密码输入框 -->
			<view class="input-item">
				<span class="iconfont input-icon icon-mima"></span>
				<input 
					class="input-field" 
					:type="showPassword ? 'text' : 'password'"
					placeholder="请输入新密码"
					v-model="formData.password"
					@input="clearError('password')"
				/>
				<view class="eye-icon" @click="togglePassword">
                    <span class="iconfont input-icon" :class="[!showPassword?'icon-yincangmima':'icon-ArtboardCopy']"></span>
				</view>
				<view v-if="error.password" class="error-tip">{{ error.password }}</view>
			</view>
			
			<!-- 确认密码输入框 -->
			<view class="input-item">
				<span class="iconfont input-icon icon-mima"></span>
				<input 
					class="input-field" 
					:type="showConfirmPassword ? 'text' : 'password'"
					placeholder="再次输入新密码"
					v-model="formData.confirmPassword"
					@input="clearError('confirmPassword')"
				/>
				<view class="eye-icon" @click="toggleConfirmPassword">
                    <span class="iconfont input-icon" :class="[!showConfirmPassword?'icon-yincangmima':'icon-ArtboardCopy']"></span>
				</view>
				<view v-if="error.confirmPassword" class="error-tip">{{ error.confirmPassword }}</view>
			</view>
			
			<!-- 密码提示 -->
			<view class="password-tip">
				<text>密码由8-20位数字、字母或符号组成</text>
			</view>
			
			<!-- 完成按钮 -->
			<button class="complete-btn" @click="handleComplete">完成</button>
		</view>
	</view>
</template>

<script>
import { validatePassword, getAppEvent } from '@/utils/utils';
import { resetPassword } from '@/api/index.js';
export default {
	data() {
		return {
			formData: {
				password: '',
				confirmPassword: ''
			},
			error: {
				password: '',
				confirmPassword: ''
			},
			showPassword: false,
			showConfirmPassword: false,
			pdTop:0
		}
	},
	mounted() {
		this.pdTop = getAppEvent('get', 'pdTop')
	},
	methods: {
		goBack(url) {
            uni.navigateTo({ url: url });
		},
		togglePassword() {
			this.showPassword = !this.showPassword;
		},
		toggleConfirmPassword() {
			this.showConfirmPassword = !this.showConfirmPassword;
		},
		clearError(field) {
			this.error[field] = '';
		},
		clearAllError() {
			this.error = { password: '', confirmPassword: '' };
		},
		handleComplete() {
			let valid = true;
			this.clearAllError();
			
			// 新密码校验
			const passwordTip = validatePassword(this.formData.password);
			if (passwordTip) {
				this.error.password = passwordTip;
				valid = false;
			}
			
			// 确认密码校验
			if (!this.formData.confirmPassword) {
				this.error.confirmPassword = '请再次输入密码';
				valid = false;
			} else if (this.formData.password !== this.formData.confirmPassword) {
				this.error.confirmPassword = '两次输入的密码不一致';
				valid = false;
			}
			
			if (!valid) return;
			
			// 重置密码
			resetPassword({
				phone: this.$store.getters.phone,
				new_password: this.formData.password
			}).then(res => {
				if (res.errno === 0) {
					uni.showToast({ title: '重置成功', icon: 'success' });
					this.$store.dispatch('logout')
					uni.navigateTo({ url: '/views/login/login' });
				} else {
					uni.showToast({ title: res.message || '重置失败', icon: 'none' });
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.reset-password-container {
	min-height: 100vh;
	background: #FFFFFF;
	padding: 0 32rpx;
}

.header-nav {
	padding-top: 26rpx;
	
	.nav-back {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
	}
}

.title-section {
	margin-bottom: 60rpx;
	
	.title {
		display: block;
		font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
        font-weight: 600;
        font-size: 44rpx;
        color: #333333;
        margin: 40rpx 0 8rpx;
	}
	
	.subtitle {
		display: block;
		font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
        font-weight: 400;
        font-size: 24rpx;
        color: #999999;
	}
}

.form-container {
	.input-item {
        position: relative;
		display: flex;
		align-items: center;
		background: #EEFAFF;
		border-radius: 96rpx;
		padding: 0 42rpx;
        height: 96rpx;
        margin-bottom: 60rpx;
		
		.input-icon {
			margin-right: 20rpx;
		}
		
		.input-field {
            flex: 1;
			font-size: 28rpx;
			color: #333;
			background: transparent;
			border: none;
			outline: none;
		}
		
		.eye-icon {
			width: 40rpx;
			height: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
		}
		
		.error-tip {
			position: absolute;
			color: #FF4D4F;
			font-size: 24rpx;
			bottom: -40rpx;
			left: 40rpx;
			line-height: 1.5;
			font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
		}
	}
	
	.password-tip {
		margin-top: -40rpx;
		margin-bottom: 120rpx;
		margin-left: 40rpx;
		
		text {
			font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
		}
	}
	
	.complete-btn {
        width: 100%;
        height: 96rpx;
        background: #0785CF;
        box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0,0,0,0.1);
        border-radius: 60rpx;
		color: #FFFFFF;
		font-size: 32rpx;
		font-weight: 600;
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;
		
		&:active {
			background: #0066CC;
		}
	}
}
</style>
